<template>
  <ga-drawer class="" :title="node.name || node.nameBak" :visible="visible" width="45vw"
    @cancel="() => emits('on-close')">

    <ga-descriptions title="详情" :column="2" :value-style="fieldContentStyle">
      <ga-descriptions-item v-for="item of fieldInfo" :label="item.title">
        <span :title="item.value">{{ item.value }}</span>
      </ga-descriptions-item>
    </ga-descriptions>
    <div class="mb10" v-if="node.type === 'pod'">
      <div class="flex-jc-sb mb10">
        <div class="title">容器列表</div>
        <ga-input-search style=" width: 180px" placeholder="请输入关键词搜索" allowClear @search="filterContainer" />
      </div>
      <ga-table :columns="containerColumns" :data="containerList" rowKey="name" size="small">
        <template #columns>
          <ga-table-column title="名称" data-index="name"></ga-table-column>
          <ga-table-column title="状态" data-index="status"></ga-table-column>
          <ga-table-column title="命名空间" data-index="namespace"></ga-table-column>
          <ga-table-column title="CPU使用量" data-index="cpuUsage" :sortable="{ sortDirections: ['ascend', 'descend'] }">
            <template #cell="{ record }">
              {{ formatUnit(record.cpuUsage, '核') }}
            </template>
          </ga-table-column>
          <ga-table-column title="内存使用量" :sortable="{ sortDirections: ['ascend', 'descend'] }">
            <template #cell="{ record }">
              {{ formatUnit(record.memoryUsage, 'byteMin') }}
            </template>
          </ga-table-column>
        </template>
      </ga-table>
      <div class="flex-jc-sb mb10 mt10">
        <!-- <MonitorTitle title="POD事件" /> -->
        <div class="title">Pod事件</div>
        <ga-input-search style="width: 180px" allowClear @search="searchPodEvent" />
      </div>
      <ga-table :columns="podEventColumns" :data="podEventList" rowKey="id" size="small" onChange={changeTable} />
    </div>

    <ga-row :gutter="16" v-if="node.type !== 'service'">
      <ga-col :span="12">
        <ChartWithPicker title="CPU使用量" :option="cpuOption" :params="lineParams" @on-time-refresh="getCPULine" />
      </ga-col>
      <ga-col :span="12">
        <ChartWithPicker title="内存使用量" :option="memoryOption" :params="lineParams" @on-time-refresh="getMemoryLine" />
      </ga-col>
      <ga-col :span="12">
        <ChartWithPicker title="磁盘使用量" :option="diskOption" :params="lineParams" @on-time-refresh="getDiskLine" />
      </ga-col>
      <ga-col :span="12" v-if="node.type === 'container'">
        <ChartWithPicker title="重启次数" :option="restartOption" :params="lineParams" @on-time-refresh="getPodRestart" />
      </ga-col>
      <ga-col :span="12" v-if="node.type === 'container'">
        <ConnectArrayChart title="连接队列情况" :option="tcpBackLogRange" :params="lineParams" />
      </ga-col>
    </ga-row>
  </ga-drawer>
</template>

<script setup>
import { watch, toRefs } from 'vue'
import ChartWithPicker from '@/components/ChartWithPicker'
import ConnectArrayChart from './components/ConnectArrayChart.vue';
import { formatUnit } from '@/utils/format'
import useFieldInfo from './useFieldInfo';
import usePodEvent from './usePodEvent';
import useLineChart from './useLineChart';
import { basiclineOption, multipleLineOptionHandle } from '@/utils/chartOption';



const props = defineProps({
  visible: Boolean,
  node: {
    type: Object,
    default: () => ({})
  },
  queryTime: {
    type: Object,
    default: () => ({})
  }
})
const emits = defineEmits(['on-close'])

const { podEventList, podEventColumns, getPodEventData, searchPodEvent } = usePodEvent(toRefs(props))
const { fieldContentStyle, fieldInfo, containerList, containerColumns, filterContainer } = useFieldInfo({ ...toRefs(props), getPodEventData })
const { cpuOption, memoryOption, diskOption, restartOption, tcpBackLogRange, lineParams, getPodRestart, getCPULine, getMemoryLine, getDiskLine } = useLineChart(toRefs(props))
watch(() => props.visible, (newV) => {
  console.log('newV', newV);

})

</script>

<style scoped lang="scss"></style>
